<template>
 <!-- @drop='drop($event)' @dragover='allowDrop($event)' -->
   <div v-if="!props" >
        <v-text :style="{'margin-top':element.style.textTop+'rem','padding-left':element.style.textLeft+'rem','padding-right':element.style.textRight+'rem'}" :prop-value="element.propValue" :element="element" />
    </div>
    <div v-else-if="props.shapeType == 1"  >
        <v-text :style="{'margin-top':element.style.textTop+'rem','padding-left':element.style.textLeft+'rem','padding-right':element.style.textRight+'rem'}" :prop-value="element.propValue" :element="element" />
    </div>

    <div v-else-if="props.shapeType == 2" style=" border-radius:50%;" :style="{width:element.style.height+'rem',height:element.style.height+'rem',margin:'auto'}">
        <v-text :style="{'margin-top':element.style.textTop+'rem','padding-left':element.style.textLeft+'rem','padding-right':element.style.textRight+'rem'}" :prop-value="element.propValue" :element="element" />
    </div>

    <div v-else-if="props.shapeType == 3" class="shapetip" :style="{'background':element.style.backgroundColor,'border-top-right-radius': props.radius_top+'rem','border-top-left-radius': props.radius_top+'rem','border-bottom-right-radius': props.radius_bottom+'rem','border-bottom-left-radius': props.radius_bottom+'rem'}">
        <div :style="{'height': props.headerHeight+'rem', 'background':props.background_top,'border-top-right-radius': props.radius_top+'rem','border-top-left-radius': props.radius_top+'rem',}"
        style="width: 100%"></div>
        <div >
            <v-text :style="{'margin-top':element.style.textTop+'rem','padding-left':element.style.textLeft+'rem','padding-right':element.style.textRight+'rem',height:`calc(100% - ${props.headerHeight+'rem'})`}" :prop-value="element.propValue" :element="element" />
        </div>
    </div>
  

</template>

<script>
export default {
    props: {
        propValue: {
            type: String,
            default: '',
        },
        element: {
            type: Object,
            default: () => {},
        },
        props:{
             type: Object,
            default: () => {},
        }
    },
    watch: {
        props: {
            handler: function(value) {
                console.log(value)
                this.props=value
            },
            deep: true
        },

    },
    methods:{
      drop(e){
        console.log(e,'矩形')
      },
      allowDrop(e){
        console.log(e,'矩形over')
      },
    }
}
</script>

<style lang="scss" scoped>
.shapetip {
    vertical-align: inherit !important;
}

// .circular {
//     width: 100%;
//     height: 100%;
//     overflow: hidden;

// }

// .yinyin {
//     box-shadow: 0px 0px 8px 1px rgba(204,204,204,0.34901960784313724);
// }
</style>
